<template>
    <div class="player">
      <NormalPlayer :totalTime='totalTime' :currentTime='currentTime'></NormalPlayer>
      <MiniPlayer></MiniPlayer>
      <ListPlayer ref='listPlayer'></ListPlayer>
      <audio :src="currentSong.url" ref="audio" @timeupdate="timeupdate" @ended="end"></audio>
    </div>
</template>

<script>
import NormalPlayer from '../components/Player/NormalPlayer.vue'
import MiniPlayer from '../components/Player/MiniPlayer.vue'
import ListPlayer from '../components/Player/ListPlayer.vue'
import { mapGetters, mapActions } from 'vuex'
import { getRandomIntInclusive, setLocalStorage, getLocalStorage } from '../tools/tools'
export default {
  name: 'Player',
  components: {
    NormalPlayer,
    MiniPlayer,
    ListPlayer
  },
  computed: {
    ...mapGetters([
      'currentSong',
      'isPlaying',
      'currentIndex',
      'curTime',
      'modeType',
      'songs',
      'favoriteList',
      'historyList'
    ])
  },
  watch: {
    isPlaying (newValue, oldValue) {
      if (newValue) {
        this.setHistorySong(this.currentSong)
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    },
    currentIndex () {
      // IOS中 系统不会自动加载歌曲，所以 oncanplay 不会自动执行
      // PC和Android端 系统会自动加载歌曲，所以 oncanplay 会自动执行
      // 解决方案 如何监听IOS中 Audio 的歌曲是否已经准备好 通过 ondurationchange 事件来监听
      // ondurationchange 当歌曲加载完成之后执行
      this.$refs.audio.ondurationchange = () => {
        this.totalTime = this.$refs.audio.duration
        if (this.isPlaying) {
          this.setHistorySong(this.currentSong)
          this.$refs.audio.play()
        } else {
          this.$refs.audio.pause()
        }
      }
    },
    curTime (newValue, oldValue) {
      this.$refs.audio.currentTime = newValue
    },
    favoriteList (newValue, oldValue) {
      setLocalStorage('favoriteList', newValue)
    },
    historyList (newValue, oldValue) {
      setLocalStorage('historyList', newValue)
    }
  },
  created () {
    const favoriteList = getLocalStorage('favoriteList')
    if (favoriteList === null) return
    this.getFavoriteList(favoriteList)
    const historyList = getLocalStorage('historyList')
    if (historyList === null) return
    this.setHistoryList(historyList)
  },
  mounted () {
    this.$refs.audio.ondurationchange = () => {
      this.totalTime = this.$refs.audio.duration
    }
  },
  data () {
    return {
      totalTime: 0,
      currentTime: 0
    }
  },
  methods: {
    ...mapActions([
      'setCurrentIndex',
      'getFavoriteList',
      'setHistorySong',
      'setHistoryList'
    ]),
    timeupdate (e) {
      this.currentTime = e.target.currentTime
    },
    end () {
      switch (this.modeType) {
        case 0:
          this.setCurrentIndex(this.currentIndex + 1)
          break
        case 1:
          this.$refs.audio.play()
          break
        case 2:
          var index = getRandomIntInclusive(0, this.songs.length - 1)
          this.setCurrentIndex(index)
          break
      }
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
